<template>
    <div class="container">
        <el-steps :active="active" align-center finish-status="success">
            <el-step title="填写商品信息" />
            <el-step title="填写商品促销" />
            <el-step title="填写商品属性" />
            <el-step title="选择商品关联" />
        </el-steps>

        <!-- 显示隐藏切换模块 -->
        <div>
            <el-form>
                <el-form-item label="商品分类：" prop="" required="true">
                    <el-cascader v-model="value" :options="options" @change="handleChange" placeholder="请选择" />
                </el-form-item>

                <el-form-item label="商品名称：" prop="" required="true">
                    <el-input />
                </el-form-item>
                <el-form-item label="副标题：" prop="" required="true">
                    <el-input />
                </el-form-item>

                <el-form-item label="商品品牌：" prop="" required="true">
                    <el-select v-model="value" class="m-2" placeholder="请选择品牌" size="large">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="商品介绍：">
                    <el-input type="textarea" placeholder="请输入内容" />
                </el-form-item>
                <el-form-item label="商品货号：">
                    <el-input />
                </el-form-item>
                <el-form-item label="商品售价：">
                    <el-input />
                </el-form-item>
                <el-form-item label="市场价：">
                    <el-input />
                </el-form-item>
                <el-form-item label="商品库存：">
                    <el-input />
                </el-form-item>
                <el-form-item label="计量单位：">
                    <el-input />
                </el-form-item>
                <el-form-item label="商品重量：">
                    <el-input /> 克
                </el-form-item>
                <el-form-item label="排序：">
                    <el-input />
                </el-form-item>
            </el-form>

            <!-- 下一步按钮 -->
            <el-button type="primary" clas="nextBtn">下一步，填写商品促销</el-button>
        </div>

    </div>
</template>
<script setup lang='ts'>
import { ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { getWithChildrenApi } from './api'

getWithChildrenApi()

// 步骤条变量
const active = ref(0)

const next = () => {
    if (active.value++ > 3) active.value = 0
}

// 表单 Cascader 级联选择器
const value = ref([])

const props = {
    expandTrigger: 'hover' as const,
}

const handleChange = (value: never[]) => {
    console.log(value)
}

const options = [
    {
        value: 'guide',
        label: '一级分类示例',
        children: [
            {
                value: 'disciplines',
                label: '子分类示例',
            },
        ],
    },
    {
        value: '2',
        label: '一级分类示例2',
        children: [
            {
                value: '2',
                label: '子分类示例2',
            },
        ],
    },
]

// 表单校验
const ruleFormRef = ref<FormInstance>()
</script>
<style lang="less" scoped>
.container {
    border: 1px solid #ebeef5;
    padding: 35px 35px 15px 35px;
    margin: 20px auto;
}
</style>